import React from 'react';

export default function VoiceCallModal({
  status, // 'calling' | 'incoming' | 'in-call'
  onAccept, onReject, onHangup, peerName
}) {
  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
      background: 'rgba(0,0,0,0.35)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center'
    }}>
      <div style={{
        background: '#fff', borderRadius: 16, padding: 32, minWidth: 280, textAlign: 'center', boxShadow: '0 4px 24px rgba(0,0,0,0.18)'
      }}>
        {status === 'calling' && (
          <>
            <div style={{fontSize: 20, marginBottom: 16}}>正在呼叫 {peerName} ...</div>
            <button onClick={onHangup} style={{background:'#ff3b30',color:'#fff',border:'none',borderRadius:8,padding:'10px 24px',fontSize:16}}>挂断</button>
          </>
        )}
        {status === 'incoming' && (
          <>
            <div style={{fontSize: 20, marginBottom: 16}}>{peerName} 来电</div>
            <button onClick={onAccept} style={{background:'#07c160',color:'#fff',border:'none',borderRadius:8,padding:'10px 24px',fontSize:16,marginRight:12}}>接听</button>
            <button onClick={onReject} style={{background:'#ff3b30',color:'#fff',border:'none',borderRadius:8,padding:'10px 24px',fontSize:16}}>拒绝</button>
          </>
        )}
        {status === 'in-call' && (
          <>
            <div style={{fontSize: 20, marginBottom: 16}}>与 {peerName} 通话中...</div>
            <button onClick={onHangup} style={{background:'#ff3b30',color:'#fff',border:'none',borderRadius:8,padding:'10px 24px',fontSize:16}}>挂断</button>
          </>
        )}
      </div>
    </div>
  );
} 